<template>
  <div class="hello" v-on:scroll="scrollListen">
      <div>{{ $store.state.show }}</div>
      <ul>
        <li class="helloList" v-for="(yourNames, index) in $store.state.helloWorldState.yourName" @click="liClick(index)">{{ yourNames.name }}</li>
      </ul>
  </div>
</template>

<script>
  import store from '../store/store'
  export default {
    name: 'HelloWorld',
    store,
    methods: {
      liClick: function (index) {
        store.state.show = true
        store.dispatch('addClicked', index)
//        this.$router.push({path: 'MainPage'})
      },
      scrollListen: function (e) {
        console.log(e.target.scrollTop)
      }
    }
  }
</script>

<style lang="less">
  .hello {
    width:100%;
    height:70%;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    padding:0 15px;
    border:1px solid pink;
    .helloList{
      height:0.3rem;
      margin-top: 0.1rem;
      background-color:#f3f3f3;
    }
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->

